<template>
	<view>
		<view class="comments-content" v-for="(item, index) in commentsList" :key="index">
			<comments-box :comments="item"  @reply="reply"></comments-box>
		</view>
		<uni-load-more v-if="commentsList.length === 0 || commentsList.length > 5" iconType="snow" :status="loading"></uni-load-more>
		
		<!-- 底部操作模块 -->
		<!-- <detail-bottom ref="detailBottom" :formData="formData" @UpdateComment="UpdateComment"></detail-bottom> -->
		<!-- 评论发布模块 -->
		<popup ref="popup"  @UpdateComment="UpdateComment"></popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				article_id:'',
				commentsList:[],
				page:1,
				pageSize:5,
				loading:"loading",
				replyFormData:{},
			}
		},
		onLoad(query) {
			console.log(query)
			this.article_id=query.id
			this.getAllComments()
			console.log("加载的更新")
		},
		onReachBottom() {
			console.log("上拉触底了")
			console.log('this.loading:',this.loading)
			if(this.loading === "noMore") return
			this.page++
			this.getComments()
		},
		methods: {
			//发布
			UpdateComment(commentsValue){
				console.log(commentsValue)
				this.setUpdateComment({content:commentsValue, ...this.replyFormData})	
				this.loading = "loading"//重新开启下拉，避免已经拉出所有数据只显示5条数据
				// console.log('发布的更新this.loading:',this.loading)
				console.log("发布的更新")
			
				
			},
			//回复
			reply(e){
				console.log("回复")
				this.replyFormData={
					"comment_id":e.comments.comment_id,
					"is_reply":e.is_reply
				}
				
				if(e.comments.reply_id){
					this.replyFormData.reply_id = e.comments.reply_id
				}
				// this.loading = "loading"//重新开启下拉，避免已经拉出所有数据只显示5条数据
				// console.log('回复this.loading:',this.loading)
				this.$refs.popup.openComment()
			},
			//更新评论
			setUpdateComment(content){
				const formdata ={
					article_id:this.article_id,
					...content
				} 
				console.log(content)
				uni.showLoading()
				this.$api.update_comment(formdata).then((res)=>{
					// console.log(res)
					uni.hideLoading()
					uni.showToast({
						title:"已经发布",
					})
				   console.log('更新评论')
					this.getAllComments()
					// this.close()
					this.replyFormData = {}//避免上次请求影响当下请求
				})
			},
			//请求评论内容
			getComments(){
				this.$api.get_comments({
					article_id:this.article_id,
					page:this.page,
					pageSize:this.pageSize
				}).then((res)=>{
					console.log(res)
					console.log('请求评论')
					const {data} = res
					console.log("data:",...data)
					console.log("data:",data.length)
					if(data.length === 0){
						this.loading = "noMore"
						return
					}
					// this.commentsList = data
					//对象复制
					let oldFormData = JSON.parse(JSON.stringify(this.commentsList))
					oldFormData.push(...data)
					this.commentsList = oldFormData

				})
			},
			//请求所有评论内容
			getAllComments(){
				this.$api.get_comments({
					article_id:this.article_id,
					// page:this.page,
					pageSize:this.pageSize
				}).then((res)=>{
					this.page=1
					console.log(res)
					console.log('请求所有评论内容')
					const {data} = res
					console.log("dataAll:",...data)
					console.log("data:",data.length)
					this.commentsList = data
				})
			},
		}
	}
</script>

<style lang="scss">
.comments-content{
	padding:0 15px;
	// border-bottom: 1px solid #ccc;
	font-size: 12px;
}
</style>
